<template>
<el-row :gutter="4" style="overflow-x:hidden padding-bottom:60px">
<el-col :span="24">
<div class="grid-content height_div">
<span class="serch_input" style="padding-left:7px">
<el-select v-model="input3" placeholder="选择类目" @visible-change="handlerSelect">
<el-option v-for="positionName in opitionsDepartment" :key="positionName.id" :label="positionName.positionName" :value="positionName.id"></el-option>
</el-select>
<i @click="clearData" v-if="!!input3" class="el-icon-close optionIcon"></i>
</span>
<span class="serch_input" style="padding-left:7px">
<el-select v-model="input3" placeholder="选择属性值" @visible-change="handlerSelect">
<el-option v-for="positionName in opitionsDepartment" :key="positionName.id" :label="positionName.positionName" :value="positionName.id"></el-option>
</el-select>
<i @click="clearData" v-if="!!input3" class="el-icon-close optionIcon"></i>
</span>
<el-button style="margin-left:-2px" :loading="searchLoading" @click="searchDetail" icon="search">搜索</el-button>
<el-button style="margin-left:5px" @click='reflesh'><img class="userinfo_color" src="../../assets/reflesh.png" />刷新</el-button>
<el-button style="margin-left:4px;margin-top:6px" type="warning" @click="showDialog"><i class="el-icon-plus add"></i>添加</el-button>
</div>
</el-col>

<el-col :span="24" class="main-table">
<el-table
v-loading="tableLoading"
ref="tableData"
:data="tableData"
border
tooltip-effect="dark"
style="margin-top:4px"
>
<el-table-column
align="center"
label="序号"
width="80">
<template scope="scope">{{ scope.$index+1}}</template>
</el-table-column>

<el-table-column
align="center"
label="属性"
>
<template scope="scope">{{ scope.row.positionName | noValueFilter}}</template>
</el-table-column>

<el-table-column
align="center"
label="属性值"
>
<template scope="scope">{{ scope.row.createDate | formattingTime}}</template>
</el-table-column>

<el-table-column label="操作" align="center" width="160">
<template scope="scope">
<el-button
size="small"
type="info"
@click="updateDictionaryInfo(scope.$index, scope.row)">编辑</el-button>
<el-button
size="small"
type="danger"
@click="delDictionaryInfo(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>

<el-table-column
align="center"
label=""
>
<template scope="scope"></template>
</el-table-column>

</el-table>

<el-col :span="24" class="pagination_top">
<el-pagination layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange1"
@size-change="handleSizeChange"
:page-sizes="[10,20,30]"
:page-size="tpmPara.pageSize" :total="total">
</el-pagination>
</el-col>
</el-col>
<el-dialog
:title="addDictionany?'添加':'更新'"
:visible.sync="dialogS"
size="tiny"
:before-close="handleClose">

<div v-if="addDictionany">
<el-form :label-position="labelPosition" ref="formVinDiction" :rules="rules" label-width="80px" :model="formVinDiction">
<el-form-item label="岗位名称" prop="positionName">
<el-input v-model="formVinDiction.positionName" placeholder="请输入名称"></el-input>
</el-form-item>
</el-form>
</div>

<div v-if="updateDictionany">
<el-form :label-position="labelPosition" ref="formVinDiction" :rules="rules" label-width="80px" :model="updateData">
<el-form-item label="岗位名称" prop="positionName">
<el-input v-model="updateData.positionName" placeholder="请输入名称"></el-input>
</el-form-item>
</el-form>
</div>

<el-col class='addButton1' v-if="updateDictionany">
<el-button style="margin-right:50px" class="addButton_a" @click="dialogS = false">取 消</el-button>
<el-button type="warning" class="addButton_a" :loading='addLoading'  @click="confirmUpdate()">保 存</el-button>
</el-col>

<el-col class='addButton1' v-if="addDictionany">
<el-button style="margin-right:50px" class="addButton_a" @click="dialogS = false">取 消</el-button>
<el-button type="warning" class="addButton_a" :loading='addLoading'  @click="addDictionaryInfo('formVinDiction')">保 存</el-button>
</el-col>
</el-dialog>
</el-row>
</template>

<script>
import {mapState, mapMutations} from 'vuex'  
export default {
data() {
return {
updateDictionany:false,
refleshLoading:false,
addDictionany:false,
tableLoading:false,
updateData:[],
opitions:[],
opitions1:[],
total:'',
labelPosition:'left',
input:'',
input1:'',
tpmPara:{},
tableData:[],
dialogS:false,
addLoading:false,
updateLoading:false,
delLoading:false,
url:'/position/getPageOfList',
url1:'/position/getAll',
url2:'/position/delete',
url3:'/position/update',
url4:'/position/add',
formVinDiction:{
positionName:''
},
rules: {
positionName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }]
}
}
},
computed: {
...mapState(['opition','pageTpm']),
},
methods: {
...mapMutations(['DELETE_ITEM','ADD_ITEM','CHANGEISIN']),
//按需求验证如下：
validate1(formVinDiction) {
this.$refs[formVinDiction].validateField('positionCode',(valid)=>{
if (valid) {}else {console.log('error submit!!');return false;}});
},
//reflesh
reflesh() {
this.tableLoading=true;
let pageTpm={
pageIndex:1,
pageSize:10,
positionName:''
};
this.tpmPara=pageTpm;
this.input='';
this.getMenuDetailList(pageTpm);
this.getMenuList()
},
//搜索
searchDetail() {
this.searchLoading=true;
let para = Object.assign(this.tpmPara,{positionName:this.input});
this.getMenuDetailList(para);
},
//显示添加框
showDialog(){
this.addDictionany=true;
this.updateDictionany=false;
this.dialogS=true;
},
//添加功能
addDictionaryInfo(formVinDiction){
this.$refs[formVinDiction].validate((valid)=>{
if(valid){
this.addLoading=true;
this.post(this.url4,this.formVinDiction).then((m)=>{
if(m.data.result){
this.dialogS=false;
this.addLoading=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.formVinDiction={
positionName:'',
positionCode:''
};
if(this.total%10==0){this.tpmPara.pageIndex+=1;}
this.getMenuDetailList(this.tpmPara);
}
if(!m.data.result){
this.addLoading=false;
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
}).catch((m)=>{
this.addLoading=false;
this.$notify({
title: '提示',
message: ''+ m.data.msg,
type: 'warning'
});
})
}})
},
//修改字典功能
updateDictionaryInfo(index,row){
this.dialogS=true;
this.addDictionany=false;
this.updateDictionany =true;
this.updateLoading=true;
let{positionName,id}=row;
this.updateData = {id:id,positionName:positionName}
},
confirmUpdate(){
this.post(this.url3,this.updateData).then((m)=>{
if(m.data.result){
this.updateLoading=false;
this.dialogS=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.dialogS=false;
this.getMenuDetailList(this.tpmPara);
}
if(!m.data.result){
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
}).catch((m)=>{
this.addLoading=false;
this.$notify({
title: '提示',
message: ''+ m.data.msg,
type: 'warning'
});
})
},
//删除功能
delDictionaryInfo(index,row){
let tpm = {};
tpm.positionId=row.id;
this.delLoading=true;
this.$confirm('是否删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.get(this.url2,tpm).then((m)=>{
if(m.data.result){
this.delLoading=false;
this.$notify({
title: '提示',
message: m.data.msg,
type: 'success'
});
this.tableData.splice(index,1);
if(this.total%10==1){
if(Math.ceil(this.total/10)==this.tpmPara.pageIndex){
this.tpmPara.pageIndex-=1;
}
}
this.getMenuDetailList(this.tpmPara);
}
if(!m.result){
this.$notify({
title: '提示',
message:m.data.msg ,
type: 'warning'
});
}
}).catch((m)=>{
this.addLoading=false;
this.$notify({
title: '提示',
message: ''+ m.data.msg,
type: 'warning'
})})})
},
//更改分页数据数
handleSizeChange(val) {
let para = {
pageIndex: 1,
pageSize: val
};
this.tpmPara=para;
this.getMenuDetailList(this.tpmPara);
},
//获取opition列表
getMenuList() {
this.get(this.url1).then((m)=>{
if(m.data.result){
this.searchLoading=false;
this.tableLoading=false;
this.opitions.push(...(m.data.data));
}
}).catch((m)=>{
console.log(m);
})
},
//获取岗位列表
getMenuDetailList(pageTpm) {
this.get(this.url,pageTpm).then((m)=>{
if(m.data.result){
this.searchLoading=false;
this.tableLoading=false;
this.tableData=m.data.data.list;
this.total=m.data.data.totalCount;
}
}).catch((m)=>{
console.log(m);
})
},
//分页功能
handleCurrentChange1(val) {
this.tableLoading=true;
let para = {
pageIndex: val,
};
this.tpmPara=Object.assign(this.tpmPara,para);
this.getMenuDetailList(this.tpmPara);
}
},
mounted() {
this.tableLoading=true;
//初始化
let pageTpm={
pageIndex:1,
pageSize:10,
positionName:''
};
this.tpmPara=pageTpm;
this.opitions=[{positionName:' ',context:'选择全部'}]
let pageTpm1={
pageIndex:1,
pageSize:10,
menuName:''
}
this.getMenuDetailList(this.tpmPara)
//this.getMenuList()
}
}
</script>

<style lang="scss" scoped> 

.dialog-add{}
.clear_block{display:block!important;}
.grid-content{color:#F9FAFC}
.grid-content1{background:#57c8f2}
.grid-content2{background:#6ccac9}
.grid-content3{background:#f8d347}
.grid-content4{background:#ff6c60}
.grid-content5{background:#a9d96c}
.grid-content6{background:#3ecabf}
.grid-content7{text-align:center;border:1px solid #eaeefb;color:#48576a;background:none}
.left-content{text-align:left;color:#F7BA2A}
.left-content p{margin:4px 0;color:#f47915}
.bg-purple-light {
background: #e5e9f2;
}
</style>